<template>
	<view>
		<view :class="'notify'+(showNotify ? ' notice-show' : ' notice-hide') " @click="close($event)">
			<view class="notify_content">
			 <image src="/static/logo.png"  class="notify_icon"></image>
			 <view class="notify_text">
				111111 
			 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref,watch } from 'vue';	
const props = defineProps({
  show:Boolean, //是否显示组件
  message:Object, //消息内容JSON格式
  path:String  // 点击跳转路径 
});

const showNotify=ref(false);
let notifyTimer=null;
watch(()=>props.show,(newVal,oldVal)=>{
	showNotify.value=newVal;
	//console.log(newVal);
	if(newVal){
		clearTimeout(notifyTimer);
		notifyTimer = setTimeout(()=>{ 
			showNotify.value=false;
		},3000);
	}
})
const close=()=>{
	clearTimeout(notifyTimer);
	showNotify.value=false;
	console.log(props.path);
}

</script>

<style lang="scss">
    .notify{
		height: 100px;
		width:550rpx;
		position: fixed;
		left:100rpx;
		top:-100%;
		z-index:9999;
		background: #fff;
		height: 60px;
		border-radius: 10px;
		box-shadow: 3px 3px 20px #888888;
	}
	.notify_content{
		padding:20rpx;
		display: flex;
	}
	.notify_icon{
		width:40rpx;
		height:40rpx;
	}
	.notify_text{
		font-size: 32rpx;
		margin-left: 10rpx;
	}
	
	.notice-show {
	  animation: slideIn 0.2s ease-out;
	  top:80px;
	}
	.notice-hide {
	  //top:80px;
	  animation: slideOut .1s ease-out;
	}
	/* 动画定义 */
	@keyframes slideIn {
	  from { transform: translateY(-100%); }
	  to { transform: translateY(80); }
	}
	
	@keyframes slideOut {
	  from { transform: translateY(80); }
	  to { transform: translateY(-100%);}
	}
</style>
